.box-shadow {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.125);
}

.title-block {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  &:before {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    content: '';
    margin-right: 6px;
    background: $theme;
  }
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}

.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
}
.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-center-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-start-center {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.flex-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.border {
  border: 1px solid #e8e8e8;
}
.border-left {
  border-left: 1px solid #e8e8e8;
}
.border-right {
  border-right: 1px solid #e8e8e8;
}
.border-top {
  border-top: 1px solid #e8e8e8;
}
.border-bottom {
  border-bottom: 1px solid #e8e8e8;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.top-0 {
  top: 0;
}
.bottom-0 {
  bottom: 0;
}

.pointer {
  cursor: pointer;
}

.move {
  cursor: move;
}

.ns-resize {
  cursor: ns-resize;
}

$bg-colors: (
  back: $back,
  white: $white,
  theme: $theme,
  warn: $warn
);

@each $key, $val in $bg-colors {
  .bgc-#{"" + $key} {
    background-color: $val
  }
}

.bgc-themeA10 {
  background-color: $primary10;
}

$colors: (
  theme: $theme,
  white: $white,
  black: $black,
  red: $red,
  l1: #333,
  l2: rgba(99, 101, 114, 1),
  l3: rgba(166, 168, 180, 1)
);

@each $key, $val in $colors {
  .tc-#{"" + $key} {
    color: $val
  }
}

// 百分比宽度 25 - 100%
@for $i from 1 through 4 {
  .wp#{"" + $i * 25} {
    width: $i * 25%;
  }
}

// 圆角
@for $i from 1 through 12 {
  .br#{"" + $i * 2} {
    border-radius: $i * 2 + px;
    overflow: hidden;
  }
}

// 文字大小
@for $i from 6 through 32 {
  .fs#{"" + $i * 2} {
    font-size: $i * 2 + px;
  }
  .fh#{"" + $i * 2} {
    line-height: $i * 2 + px;
  }
}

// 文字 weight
@each $w in (400, 500, 600, 700) {
  .fw#{"" + $w} {
    font-weight: $w;
  }
}

// 文字横向排列
@each $ta in (right, left, center) {
  .ta-#{"" + $ta} {
    text-align: $ta;
  }
}

// 内外间距原子样式，0-32px
@for $i from 0 through 32 {
  .m#{"" + $i * 2} {
    margin: $i * 2 + px;
  }

  .mv#{"" + $i * 2} {
    margin-top: $i * 2 + px;
    margin-bottom: $i * 2 + px;
  }

  .mh#{"" + $i * 2} {
    margin-left: $i * 2 + px;
    margin-right: $i * 2 + px;
  }

  .ml#{"" + $i * 2} {
    margin-left: $i * 2 + px;
  }

  .mr#{"" + $i * 2} {
    margin-right: $i * 2 + px;
  }

  .mt#{"" + $i * 2} {
    margin-top: $i * 2 + px;
  }

  .mb#{"" + $i * 2} {
    margin-bottom: $i * 2 + px;
  }

  .p#{"" + $i * 2} {
    padding: $i * 2 + px;
  }

  .pv#{"" + $i * 2} {
    padding-top: $i * 2 + px;
    padding-bottom: $i * 2 + px;
  }

  .ph#{"" + $i * 2} {
    padding-left: $i * 2 + px;
    padding-right: $i * 2 + px;
  }

  .pl#{"" + $i * 2} {
    padding-left: $i * 2 + px;
  }

  .pr#{"" + $i * 2} {
    padding-right: $i * 2 + px;
  }

  .pt#{"" + $i * 2} {
    padding-top: $i * 2 + px;
  }

  .pb#{"" + $i * 2} {
    padding-bottom: $i * 2 + px;
  }
}